<template>
  <div class="login-log-div">
    <div class="search-login-log-div">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="登录名">
          <el-input v-model="form.user" style="width: 200px" placeholder="登录名" clearable></el-input>
        </el-form-item>
        <el-form-item label="登录时间">
          <el-date-picker
              v-model="loginLogDate"
              type="daterange"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-login-log-div">
      <div class="table-oper-div">
        <el-button type="danger" :icon="Delete" @click="deleteLoginLog" circle/>
      </div>
      <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          border
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column property="userName" label="登录名"/>
        <el-table-column property="clientIp" label="登录ip"/>
        <el-table-column property="createTime" label="登录时间"/>
      </el-table>
      <el-pagination :page-size="form.pageSize" v-model:current-page="form.pageNum"
                     @current-change="handleCurrentChange" layout="prev, pager, next" v-model:total="form.total"/>

    </div>
  </div>
</template>

<script setup>
import {Delete} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {deleteLoginLogApi, getLoginLogPageApi} from "@/assets/api/system/log";
import {ElMessage, ElMessageBox} from "element-plus";

const form = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  user: '',
  startTime: '',
  endTime: ''
})
const loginLogDate = ref([])

const onSubmit = () => {
  form.value.startTime = loginLogDate.value[0]
  form.value.endTime = loginLogDate.value[1]
  getTableData();
}

const onReset = () => {
  form.value.user = ''
  form.value.startTime = ''
  form.value.endTime = ''
  loginLogDate.value = []
}

// 全选按钮
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 查询日志列表
const tableData = ref([])
const getTableData = () => {
  getLoginLogPageApi(form.value).then(res => {
    tableData.value = res.data.data.records
    form.value.total = res.data.data.total
  })
}

// 页码切换处理器
const handleCurrentChange = () => {
  getTableData();
}

// 删除日志
const deleteLoginLog = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage({
      message: '请选择一条数据进行删除',
      type: 'warning'
    });
    return;
  }
  ElMessageBox.confirm(
      '确认要删除吗？',
      '重要提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 将对象中的id取出组成新的数组，然后使用join拼接
    const ids = multipleSelection.value.map(item => item.id);
    deleteLoginLogApi(ids.join(",")).then(res => {
      if (res.data.code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getTableData();
      } else {
        ElMessage({
          type: 'error',
          message: res.data.msg,
        })
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}

onMounted(() => {
  getTableData();
})
</script>

<style scoped>
.table-oper-div {
  padding-left: 15px;
  padding-bottom: 10px;
}
</style>